<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<link href="demo.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../resources/utils.js" charset="utf-8"></script>
	<script type="text/javascript" src="../src/pithy.ajax.js" charset="utf-8"></script>
	<script type="text/javascript" src="../src/pithy.teemplate.js" charset="utf-8"></script>
	<script type="text/javascript" src="demo.js" charset="utf-8"></script>

	<title>Pithy.js.teemplate / Demo</title>
</head>
<body>
	<p id="nav-list"></p>
	<h2>Pjt示例</h2>
	<div class="container">
		<div class="result render-result"><h3>渲染结果</h3><div id="result"></div></div>
	</div>

	<script>
		var data = {
			name : 'anlige',
			age : 23,
			list : [
				{date : '1986-9-1', text : 'birthday'},
				{date : '1998-9-1', text : 'schrool'},
				{date : '2009-6-21', text : 'work'}
			],
			basic : {
				sex : 'boy',
				works : 9
			}
		};
		AJAX.require('../src/pithy.teemplate.helper.js', function(helper){
			helper.bind(data, '_template', 'result');
		});
	</script>

	<script type="text/template" id="_template">
		<div>name = @name</div>
		<div>age = @age</div>
		<div>4 years later = @(age + 4)</div>
		<div>sex = @basic.sex</div>
		<div>works = @basic.works</div>
		@{
			var r = 255, g = 0, b = 0;
		}
		<div style="color:rgb(@r, @g, @b)">color:rgb(@r, @g, @b)</div>
		<ul>
		@for(var i = 0; i < list.length; i++){
			<li>@list[i].text = @list[i].date</li>
		}
		</ul>
		<ul>
		@each list as value{
			<li>@value.text =  @value.date</li>
		}
		</ul>
		<ul>
		@foreach basic as key, value{
			<li>@key = @value</li>
		}
		</ul>
	</script>
</body>
</html>